<template>
	<view class="container">
		<view class="tui-img__box">
			<image :src="webURL + 'member_01.png'" class="tui-img" mode="widthFix"></image>
			<image :src="webURL + 'member_02.png'" class="tui-img" mode="widthFix"></image>
			<image :src="webURL + 'member_03.png'" class="tui-img" mode="widthFix"></image>
			<image :src="webURL + 'member_04.png'" class="tui-img" mode="widthFix"></image>
			<view class="tui-bg-view">
				<image :src="webURL + 'member_05.png'" class="tui-img" mode="widthFix"></image>
				<view class="tui-explain__box">
					<swiper class="tui-explain-swiper" :indicator-dots="false" next-margin="30px" previous-margin="30px">
						<swiper-item class="tui-swiper__item">
							<view class="tui-explain-item">
								<view class="tui-vip__title">为什么要设置VIP？</view>
								<view class="tui-vip__desc">
									本框架所有资源都是花大量精力时间开发、整理。力求让每位小伙伴学到东西，节约开发时间与成本。每一个资源都是精品，其价值是经得起验证的。我们需要大家的友情赞助才能保持长期稳定的更新。希望大家能理解并支持！
								</view>
								<view class="tui-vip__desc">我们会不忘初心，力求达到高质量高颜值的组件库和模板库！</view>
								<view class="tui-vip__btn" @tap="joinMember">开通VIP</view>
							</view>
						</swiper-item>
						<swiper-item class="tui-swiper__item">
							<view class="tui-explain-item">
								<view class="tui-vip__title">非会员与会员的区别？</view>
								<view class="tui-vip__desc">
									非会员：可以免费商用开源项目中的所有组件，其中模板仅供学习参考，不可商用。开源项目也会长期维护更新。
								</view>
								<view class="tui-vip__desc">会员：提供更多的组件与功能扩展，除付费模板外所有功能均可免费商用，后期开源模板只针对会员进行更新。开通会员可进入会员群，获取更优质的服务！</view>
								<view class="tui-vip__btn" @tap="joinMember">开通VIP</view>
							</view>
						</swiper-item>
						<swiper-item class="tui-swiper__item">
							<view class="tui-explain-item">
								<view class="tui-vip__title">VIP资费及有效期？</view>
								<view class="tui-vip__desc">
									ThorUI会员服务资费120元/永久，终身会员制，一次付费，永久尊享升级，付费模板可享受折扣。
								</view>
								<view class="tui-vip__desc">价格：￥120/永久</view>
								<view class="tui-vip__desc">免费才是世界上最昂贵的东西！不管是开源还是付费，这种经验输出的价值是非常重要的，希望开发者珍惜。</view>
								<view class="tui-vip__btn" @tap="joinMember">开通VIP</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<image style="background-color: #1f1e41;" :src="webURL + 'member_06.png'" class="tui-img" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import thorui from '@/components/common/tui-clipboard/tui-clipboard.js'
	export default {
		data() {
			return {
				webURL: 'https://thorui.cn/extend/member/'
			};
		},
		methods: {
			joinMember(e) {
				this.tui.modal('开通VIP', '请添加QQ3168647172申请开通！', true, (res) => {
					if (res) {
						this.copy(e)
					}
				}, '#e3c8ad', '复制QQ')
			},
			copy(e) {
				thorui.getClipboardData('3168647172', res => {
					if (res) {
						this.tui.toast('复制成功');
					}
				}, e);
			}
		}
	};
</script>

<style>
	page,
	.container {
		background-color: #1f1e41;
	}

	.tui-img__box {
		width: 100%;
	}

	.tui-img {
		width: 100%;
		height: auto;
		display: block;
	}

	.tui-bg-view {
		width: 100%;
		position: relative;
	}

	.tui-explain__box {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.tui-explain-swiper,
	.tui-swiper__item {
		width: 100%;
		height: 100%;
	}

	.tui-swiper__item {
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.tui-explain-item {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
		background-color: rgba(227, 200, 173, 0.05);
		color: #e3c8ad;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		position: relative;
	}

	.tui-vip__title {
		font-size: 40rpx;
		font-weight: bold;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid rgba(227, 200, 173, 0.4);
		color: rgba(227, 200, 173, 0.95);
	}

	.tui-vip__desc {
		padding-top: 24rpx;
		font-size: 28rpx;
		color: rgba(227, 200, 173, 0.85);
	}

	.tui-vip__btn {
		width: 280rpx;
		height: 80rpx;
		background-color: rgba(227, 200, 173, 0.2);
		border-radius: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 50%;
		bottom: 40rpx;
		transform: translateX(-50%);
	}
</style>
